<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>运营周报</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body class="layout-top-nav"><!--skin-blue-light -->
<div class="page wrap-week">
   
    <!-- 这里是页面内容区 -->
    <div class="content">

        <div class="card card-echarts">
            <div class="card-header"><p>日活跃波动趋势图(万人)</p></div>
            <div class="card-content">
                <div class="card-content-inner">
                    <div  class="mmChart"
                          data-chart_type="line"
                          data-chart_options="
                                            {
                                                grid:{top:10,bottom:55,left:0},
                                                series:[
                                                           {itemStyle:{normal:{}},lineStyle:{normal:{type:'solid',shadowColor:'#FFD8E0',shadowBlur:30,color:{type: 'linear',x: 0,y:0, x2: 0,y2:1, colorStops: [{offset: 0, color: '#FF406A' }, {offset: 1, color: '#FF94AB' }]}}},smooth:true,showSymbol:true,symbolSize:3,animation:true},
                                                           {lineStyle:{normal:{type:'dashed',shadowColor:'#D0E1FF',shadowBlur:30,color:{type: 'linear',x: 0,y:0, x2: 0,y2:1, colorStops: [{offset: 0, color: '#075CF7' }, {offset: 1, color: '#5B95FF' }]}}},smooth:true,showSymbol:false,symbolSize:3,animation:true},
                                                           {lineStyle:{normal:{type:'dotted',shadowColor:'#D4F5E1',shadowBlur:30,color:{type: 'linear',x: 0,y:0, x2: 0,y2:1, colorStops: [{offset: 0, color: '#3FD599' }, {offset: 1, color: '#DDE75C' }]}}},smooth:true,showSymbol:false,symbolSize:3,animation:true},
                                                       ],
                                                legend:{bottom:0},
                                                color:['#FF456D','#206DFA','#68DA8A'],
                                                yAxis: {axisLine: {show: false},splitLine:{ lineStyle:{ color:'#F2F4F8',type:'solid'}}}
                                            }"
                          style="height:24.5rem;"

                    >
                    </div>
                </div>
            </div>




            <div class="card-header"><p>日活跃波动趋势图(万人)2</p></div>
            <div class="card-content">
                <div class="card-content-inner">
                    <div  class="mmChart2"
                          data-chart_type="line"
                          data-chart_options="
                                            {
                                                grid:{top:10,bottom:55,left:0},
                                                series:[
                                                           {itemStyle:{normal:{}},lineStyle:{normal:{type:'solid',shadowColor:'#FFD8E0',shadowBlur:30,color:{type: 'linear',x: 0,y:0, x2: 0,y2:1, colorStops: [{offset: 0, color: '#FF406A' }, {offset: 1, color: '#FF94AB' }]}}},smooth:true,showSymbol:true,symbolSize:3,animation:true},
                                                           {lineStyle:{normal:{type:'dashed',shadowColor:'#D0E1FF',shadowBlur:30,color:{type: 'linear',x: 0,y:0, x2: 0,y2:1, colorStops: [{offset: 0, color: '#075CF7' }, {offset: 1, color: '#5B95FF' }]}}},smooth:true,showSymbol:false,symbolSize:3,animation:true}
                                                       ],
                                                legend:{bottom:0},
                                                color:['#FF456D','#206DFA','#68DA8A'],
                                                yAxis: {axisLine: {show: false},splitLine:{ lineStyle:{ color:'#F2F4F8',type:'solid'}}}
                                            }"
                          data-group-Field='category'
                          data-value-fields="{'dayValue':'日活完成量','monthTarget':'日活目标按月分解'}"
                          style="height:24.5rem;"

                    >
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- ./wrapper -->
<script src="../lib/jquery.min.js"></script>

<script src="../lib/echarts.min.js"></script>

<script src="../mm.echarts.js"></script>

<script>
    $(function(){

        var dataset = [{
            "category": "201701",
            "dayValue": 189.0,
            "monthTarget": 189.00,
            "yearTarget": "2007"
        }, {
            "category": "201702",
            "dayValue": 167.0,
            "monthTarget": 167.00,
            "yearTarget": "2007"
        }, {
            "category": "201703",
            "dayValue": 150.0,
            "monthTarget": 109.00,
            "yearTarget": "2007"
        }, {
            "category": "201704",
            "dayValue": 148.0,
            "monthTarget": 174.00,
            "yearTarget": "2007"
        }, {
            "category": "201705",
            "dayValue": 177.0,
            "monthTarget": 118.00,
            "yearTarget": "2007"
        }, {
            "category": "201706",
            "dayValue": 177.0,
            "monthTarget": 139.00,
            "yearTarget": "2007"
        }, {
            "category": "201707",
            "dayValue": 146.18,
            "monthTarget": 584.00,
            "yearTarget": "2007"
        }, {
            "category": "201708",
            "dayValue": 188.79,
            "monthTarget": 620.00,
            "yearTarget": "2007"
        }, {
            "category": "201709",
            "dayValue": 185.38,
            "monthTarget": 125.00,
            "yearTarget": "2007"
        }, {"category": "201710", "dayValue": 278.61, "monthTarget": 225.00, "yearTarget": "2007"}];

		$('.mmChart').mmEcharts({dataset:dataset,groupField:'category',valueFields:{'dayValue':'日活完成量','monthTarget':'日活目标按月分解','yearTarget':'日活全年目标'}});

		$('.mmChart2').mmEcharts({dataset:dataset});
    });
</script>

</body>
</html>